<template>
  <el-card>
    <el-button
      :icon="Plus"
      type="primary"
      :disabled="!categoryStore.category3Id"
      @click="emit('setIsShow', false)"
      >添加SPU</el-button
    >
    <el-table border :data="spuList">
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="spuName" label="SPU名称"></el-table-column>
      <el-table-column prop="description" label="SPU描述"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" :icon="Plus" type="primary"></el-button>
          <el-button size="small" :icon="Edit" type="primary"></el-button>
          <el-button size="small" :icon="InfoFilled" type="info"></el-button>
          <el-button size="small" :icon="Delete" type="danger"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="page"
      v-model:page-size="limit"
      layout="prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script lang="ts">
export default {
  name: "SpuList",
}
</script>

<script lang="ts" setup>
import { ref, watch, defineEmits } from "vue"
import { useCategoryStore } from "@/stores/categorySelector"
import { getSpuListApi } from "@/api/product/spu"
import { Plus, Edit, InfoFilled, Delete } from "@element-plus/icons-vue"
import type { SpuListItem } from "@/api/product/model/spuModel"
const page = ref(1)
const limit = ref(3)
const total = ref(0)
const emit = defineEmits(["setIsShow"])
const categoryStore = useCategoryStore()
const spuList = ref<SpuListItem[]>([])
// 获取spu列表数据函数
const getSpuList = async () => {
  const result = await getSpuListApi({
    page: page.value,
    limit: limit.value,
    category3Id: categoryStore.category3Id as number,
  })
  console.log('spulist',result)
  spuList.value = result.records
  total.value = result.total
}
// 监听仓库变化
watch(categoryStore, (newVal) => {
  if (!newVal.category3Id) return
  getSpuList()
})

const handleSizeChange = (newLimit: number) => {
  limit.value = newLimit
  getSpuList()
}
const handleCurrentChange = (newPage: number) => {
  page.value = newPage
  getSpuList()
}
</script>

<style scoped></style>
